<template>
  <el-card class="form-container" shadow="never">
    <el-steps :active="active" finish-status="success" align-center>
      <el-step title="填写商品信息"></el-step>
      <el-step title="填写商品属性"></el-step>
    </el-steps>
    <product-info-detail
      v-show="showStatus[0]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @setImgId="setImgId"
      @getFilterProductAttrList="getFilterProductAttrList"
      @getSelectProductPics="getSelectProductPics"
    >
    </product-info-detail>
    <product-attr-detail
      v-show="showStatus[1]"
      v-model="productParam"
      :is-edit="isEdit"
      @nextStep="nextStep"
      @prevStep="prevStep"
      @finishCommit="finishCommit"
      @setProductDetailImgs="setProductDetailImgs"
      @setFilterProductAttrList="setFilterProductAttrList"
      :getFilterProductAttrListData="getFilterProductAttrListData"
      :getSelectProductPicsData="getSelectProductPicsData"
      @getDeletedImgs="getDeletedImgs"
    >
    </product-attr-detail>
  </el-card>
</template>
<script>
import ProductInfoDetail from "./ProductInfoDetail";
import ProductAttrDetail from "./ProductAttrDetail";
import {
  AddCommodity,
  AddCommodityimgs,
  AddSpecifications,
  updataCommodityById,
  updatespecifications,
  frozenimgs
} from "../../../../api/product";

const defaultProductParam = {
  //商品分类
  productCategoryId: "",
  //商品名称
  name: "",
  //品牌id
  brandId: "",
  //商品介绍
  description: "",
  //商品封面
  logo: "",
  //商品售价
  price: 0,
};
export default {
  name: "ProductDetail",
  components: {
    ProductInfoDetail,
    // ProductSaleDetail,
    ProductAttrDetail,
    // ProductRelationDetail,
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      deletepicture:[],
      deletepictureid:[],
      active: 0,
      productParam: defaultProductParam,
      showStatus: [true, false, false, false],
      ProductDetailImgs: [],
      filterProductAttrList: [],
      ImgId: 0,
      getFilterProductAttrListData: [],
      getSelectProductPicsData:[],
      DeletedProductDetailImgs:[]
    };
  },
  created() {
    if (this.isEdit) {
      // getProduct(this.$route.query.id).then((response) => {
      // this.productParam = response.data;
      // });
    }
  },
  methods: {
    getDeletedImgs(val){
      console.log(val);
      this.deletepicture = val;
      console.log(this.deletepicture);

      this.DeletedProductDetailImgs = val;


    },
    getSelectProductPics(val){
      console.log(val);
      this.getSelectProductPicsData = val;
    },
    getFilterProductAttrList(val) {
      console.log(val);
      this.getFilterProductAttrListData = val;
    },
    setImgId(val) {
      console.log(val);
      this.ImgId = val;
    },
    setFilterProductAttrList(val) {
      this.filterProductAttrList = val;
      // console.log(this.filterProductAttrList);
    },
    setProductDetailImgs(val) {
      this.ProductDetailImgs = val;
    },
    hideAll() {
      for (let i = 0; i < this.showStatus.length; i++) {
        this.showStatus[i] = false;
      }
    },
    prevStep() {
      if (this.active > 0 && this.active < this.showStatus.length) {
        this.active--;
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    nextStep() {
      if (this.active < this.showStatus.length - 1) {
        this.active++;
        console.log(this.active);
        this.hideAll();
        this.showStatus[this.active] = true;
      }
    },
    finishCommit(isEdit) {
      console.log(
        this.$route.query.id,
        this.productParam,
        this.filterProductAttrList,
        this.ProductDetailImgs
      );
      this.$confirm("是否要提交该产品", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (isEdit) {
          console.log(
            this.$route.query.id,
            this.productParam,
            this.filterProductAttrList,
            this.ProductDetailImgs
          );

          console.log(this.deletepicture);
          this.deletepicture.forEach((item)=>{
            console.log(item.id);
            this.deletepictureid=item.id;
      
            frozenimgs(item.id).then(({data})=>{
              console.log(data);
            });

          })
          console.log(this.deletepictureid);
          console.log("ddd");

            var updataCommodityDate = {
            CommodityName: this.productParam.name,
            CommodityCurrentPrice: parseInt(this.productParam.price),
            ProductDetails: this.productParam.description,
            ImgId:parseInt( this.ImgId),
            BrandId:parseInt(this.productParam.brandId),
            ShopTypeId:parseInt( this.productParam.productCategoryId),
          };
          console.log(updataCommodityDate);



          updataCommodityById(this.$route.query.id,updataCommodityDate);  

          //通过用户Id修改商品规格
          this.filterProductAttrList.forEach((ele)=>{
            var SpecificationData = {
                  CommodityId: parseInt(this.$route.query.id), 
                  SpecificationsName: ele.value,
                  Price: parseInt(ele.price),
                };
                console.log(SpecificationData);

                updatespecifications(this.$route.query.id,SpecificationData);
                // updatespecifications(SpecificationData)
                //   .then(({ data }) => {
                //     console.log(data);
                //   })
                //   .catch((err) => {
                //     console.log(err);
                //   });
          })
          

          // this.$message({
          //   type: "success",
          //   message: "提交成功",
          //   duration: 1000,
          // });
          // this.$router.back();
        } else {

          var commodityDate = {
            CommodityName: this.productParam.name,
            CommodityCurrentPrice: parseInt(this.productParam.price),
            ProductDetails: this.productParam.description,
            ImgId: this.ImgId,
            BrandId: this.productParam.brandId,
            ShopTypeId: this.productParam.productCategoryId,
          };

          AddCommodity(commodityDate)
            .then(({ data }) => {
              console.log(data);
              var res = data.data;

              this.ProductDetailImgs.forEach((item) => {
                var ProductDetailImgsData = {
                  ImgId: parseInt(item.id),
                  CommodityId: parseInt(res.id),
                };
                AddCommodityimgs(ProductDetailImgsData)
                  .then(({ data }) => {
                    console.log(data);
                  })
                  .catch((err) => {
                    console.log(err);
                  });
              });

              this.filterProductAttrList.forEach((ele) => {
                var SpecificationData = {
                  CommodityId: parseInt(res.id),
                  SpecificationsName: ele.value,
                  Price: parseInt(ele.price),
                };
                AddSpecifications(SpecificationData)
                  .then(({ data }) => {
                    console.log(data);
                  })
                  .catch((err) => {
                    console.log(err);
                  });

              });

              this.$message({
                type: "success",
                message: "提交成功",
                duration: 1000,
              });
              location.reload();
            })
            .catch();
        }
      });
    },
  },
};
</script>
<style></style>
